<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->
<template>
  <div class="min-h-screen bg-white">
    <!-- 顶部操作区 -->
    <div class="fixed top-0 left-0 right-0 z-10 bg-white shadow-sm">
      <div class="max-w-[1440px] mx-auto px-6 py-4">
        <div class="flex items-center gap-4">
          <div class="relative flex-1">
            <el-input v-model="searchText" placeholder="搜索任务" class="!rounded-lg text-sm">
              <template #prefix>
                <el-icon class="text-gray-400">
                  <Search />
                </el-icon>
              </template>
            </el-input>
          </div>
          <div class="flex-shrink-0 flex gap-2">
            <el-button type="primary" class="!rounded-button whitespace-nowrap">
              新建任务
            </el-button>
          </div>
        </div>
        <div class="mt-4 flex items-center gap-3 overflow-x-auto pb-2">
          <el-tag v-for="tag in filterTags" :key="tag.id" :type="tag.active ? 'primary' : ''"
            class="!rounded-button cursor-pointer whitespace-nowrap" @click="toggleTag(tag.id)">
            {{ tag.name }}
          </el-tag>
        </div>
      </div>
    </div>
    <!-- 主体内容区 -->
    <div class="pt-32 pb-8 px-6 max-w-[1440px] mx-auto">
      <div class="grid grid-cols-4 gap-4 h-[400px]">
        <div v-for="status in statusList" :key="status.id" class="w-full">
          <div class="rounded-lg p-4 h-[400px] bg-gray-50">
            <div class="flex items-center justify-between mb-4 sticky top-0">
              <h3 :class="{
                'text-blue-500': status.id === 1,
                'text-yellow-500': status.id === 2,
                'text-green-500': status.id === 3,
                'text-purple-500': status.id === 4,
                'text-gray-500': status.id === 5
              }" class="font-medium">{{ status.name }}</h3>
              <span class="text-sm text-gray-500 cursor-pointer hover:text-blue-500" @click="showStatusTasks(status)">{{
                status.count }}个任务</span>
            </div>
            <div class="space-y-2 h-[calc(400px-40px)] overflow-y-auto">
              <div v-for="task in status.tasks" :key="task.id"
                class="bg-white rounded-lg p-3 shadow-md hover:shadow-xl transition-shadow duration-200 border border-gray-100">
                <div class="flex items-start justify-between group">
                  <h4 class="text-sm font-semibold cursor-pointer hover:text-blue-500 leading-6 transition-colors"
                    @click="showTaskDetail(task)">
                    {{ task.title }}
                  </h4>
                  <el-dropdown trigger="click">
                    <div class="opacity-0 group-hover:opacity-100 transition-opacity">
                      <el-button size="small" class="!rounded-button">
                        <el-icon>
                          <More />
                        </el-icon>
                      </el-button>
                    </div>
                    <template #dropdown>
                      <el-dropdown-menu>
                        <el-dropdown-item v-for="action in actions" :key="action.name"
                          @click="handleAction(action.name, task)">
                          <span :class="{
                            'text-blue-500': action.type === 'primary',
                            'text-red-500': action.type === 'danger'
                          }">{{ action.label }}</span>
                        </el-dropdown-item>
                      </el-dropdown-menu>
                    </template>
                  </el-dropdown>
                </div>
                <div class="mt-2 space-y-1.5">
                  <div v-for="(members, group) in task.members" :key="group" class="flex flex-wrap gap-2">
                    <span class="text-xs text-gray-500">{{ group }}：</span>
                    <template v-if="group === '技术负责人'">
                      <el-dropdown trigger="click">
                        <el-tag v-for="member in members" :key="member" size="small" :type="getMemberTagType(member)"
                          class="!rounded-button cursor-pointer">
                          {{ member }}
                          <el-icon class="ml-1">
                            <ArrowDown />
                          </el-icon>
                        </el-tag>
                        <template #dropdown>
                          <el-dropdown-menu>
                            <el-dropdown-item v-for="leader in availableLeaders" :key="leader"
                              @click="changeLeader(task.id, leader)">
                              {{ leader }}
                            </el-dropdown-item>
                          </el-dropdown-menu>
                        </template>
                      </el-dropdown>
                    </template>
                    <template v-else>
                      <el-tag v-for="member in members" :key="member" size="small" :type="getMemberTagType(member)"
                        class="!rounded-button cursor-pointer" @click="showMemberDetail(member)">
                        {{ member }}
                      </el-tag>
                    </template>
                  </div>
                </div>
                <div class="mt-2 flex items-center justify-between text-xs text-gray-500">
                  <span>{{ task.startDate }} - {{ task.endDate }}</span>
                  <span>剩余 {{ task.remainingDays }} 天</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 弹窗组件 -->
    <el-dialog v-model="dialogVisible" :title="dialogTitle" :width="dialogWidth" destroy-on-close>
      <div class="min-h-[200px]">
        <template v-if="dialogType === 'statusTasks'">
          <div class="grid grid-cols-2 gap-4">
            <div v-for="task in currentStatusTasks" :key="task.id"
              class="bg-white rounded-lg p-3 shadow-md hover:shadow-xl transition-shadow duration-200 border border-gray-100">
              <div class="flex items-start justify-between group">
                <h4 class="text-sm font-semibold cursor-pointer hover:text-blue-500 leading-6 transition-colors"
                  @click="showTaskDetail(task)">
                  {{ task.title }}
                </h4>
                <el-dropdown trigger="click">
                  <div class="opacity-0 group-hover:opacity-100 transition-opacity">
                    <el-button size="small" class="!rounded-button">
                      <el-icon>
                        <More />
                      </el-icon>
                    </el-button>
                  </div>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item v-for="action in actions" :key="action.name"
                        @click="handleAction(action.name, task)">
                        <span :class="{
                          'text-blue-500': action.type === 'primary',
                          'text-red-500': action.type === 'danger'
                        }">{{ action.label }}</span>
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </div>
              <div class="mt-2 space-y-1.5">
                <div v-for="(members, group) in task.members" :key="group" class="flex flex-wrap gap-2">
                  <span class="text-xs text-gray-500">{{ group }}：</span>
                  <template v-if="group === '技术负责人'">
                    <el-dropdown trigger="click">
                      <el-tag v-for="member in members" :key="member" size="small" :type="getMemberTagType(member)"
                        class="!rounded-button cursor-pointer">
                        {{ member }}
                        <el-icon class="ml-1">
                          <ArrowDown />
                        </el-icon>
                      </el-tag>
                      <template #dropdown>
                        <el-dropdown-menu>
                          <el-dropdown-item v-for="leader in availableLeaders" :key="leader"
                            @click="changeLeader(task.id, leader)">
                            {{ leader }}
                          </el-dropdown-item>
                        </el-dropdown-menu>
                      </template>
                    </el-dropdown>
                  </template>
                  <template v-else>
                    <el-tag v-for="member in members" :key="member" size="small" :type="getMemberTagType(member)"
                      class="!rounded-button cursor-pointer" @click="showMemberDetail(member)">
                      {{ member }}
                    </el-tag>
                  </template>
                </div>
              </div>
              <div class="mt-2 flex items-center justify-between text-xs text-gray-500">
                <span>{{ task.startDate }} - {{ task.endDate }}</span>
                <span>剩余 {{ task.remainingDays }} 天</span>
              </div>
            </div>
          </div>
        </template>
        <template v-else-if="dialogType === 'assign'">
          <div class="p-4">
            <el-form label-position="top">
              <div class="mb-3 bg-gray-50 p-3 rounded-lg">
                <el-form-item label="整体结束时间" class="w-full mb-0">
                  <el-date-picker v-model="overallDeadline" type="date" placeholder="选择整体结束时间" style="width: 200px" />
                </el-form-item>
              </div>
              <div v-for="(item, index) in assignItems" :key="index" class="mb-3 bg-gray-50 p-3 rounded-lg">
                <div class="grid grid-cols-7 gap-3">
                  <el-form-item label="职能组" class="col-span-1 mb-0">
                    <el-select v-model="item.role" placeholder="选择职能组" class="w-full">
                      <el-option v-for="role in ['研发组', '测试组', '运维组']" :key="role" :label="role" :value="role" />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="参与人" class="col-span-1 mb-0">
                    <el-select v-model="item.participant" filterable placeholder="选择参与人" class="w-full">
                      <el-option v-for="member in availableMembers" :key="member" :label="member" :value="member" />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="预计完成时间" class="col-span-1 mb-0">
                    <el-date-picker v-model="item.deadline" type="date" placeholder="选择完成时间" class="w-full" />
                  </el-form-item>
                  <el-form-item label="预计耗时(小时)" class="col-span-1 mb-0">
                    <el-input-number v-model="item.estimatedHours" :min="1" :max="999" class="w-full"
                      controls-position="right" />
                  </el-form-item>
                  <el-form-item label="难度评分" class="col-span-2 mb-0">
                    <el-rate v-model="item.difficulty" :max="5" :texts="['简单', '较简单', '中等', '较难', '困难']" show-text />
                  </el-form-item>
                  <div class="flex items-end">
                    <el-button type="danger" class="!rounded-button" @click="removeAssignItem(index)"
                      v-if="assignItems.length > 1" size="default">
                      <el-icon class="mr-1">
                        <Delete />
                      </el-icon>
                      删除
                    </el-button>
                  </div>
                </div>
                <el-form-item label="工作内容" class="mb-0 mt-2">
                  <el-input v-model="item.description" type="textarea" :rows="1" placeholder="请简述工作内容" />
                </el-form-item>
              </div>
              <div class="flex justify-center mt-3">
                <el-button type="primary" class="!rounded-button" @click="addAssignItem" size="default">
                  <el-icon class="mr-1">
                    <Plus />
                  </el-icon>
                  添加分配项
                </el-button>
              </div>
            </el-form>
          </div>
        </template>
        <template v-else>
          {{ currentTask?.title }}的{{ dialogTitle }}
        </template>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleDialogConfirm">
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import { ref, computed } from 'vue';
import { Delete, Plus } from '@element-plus/icons-vue';
const availableMembers = [
  '张伟峰', '林志明', '黄伟东', '章云飞', '郑明远',
  '刘志强', '孙宇轩', '吴志远', '陈天成', '赵思远',
  '王志远', '陈思远', '周天成', '李思远', '张思远'
];
interface AssignItem {
  role: string;
  participant: string;
  deadline: string;
  description: string;
  estimatedHours: number;
  difficulty: number;
}
const overallDeadline = ref('');
const assignItems = ref<AssignItem[]>([{
  role: '',
  participant: '',
  deadline: '',
  description: '',
  estimatedHours: 8,
  difficulty: 3
}]);
const addAssignItem = () => {
  assignItems.value.push({
    participant: '',
    deadline: '',
    description: '',
    estimatedHours: 8,
    difficulty: 3
  });
};
const removeAssignItem = (index: number) => {
  assignItems.value.splice(index, 1);
};
const getMemberTagType = (name: string) => {
  const firstChar = name.charCodeAt(0);
  // 根据姓名首字符的 ASCII 码来决定标签类型
  if (firstChar % 5 === 0) return 'success';
  if (firstChar % 5 === 1) return 'warning';
  if (firstChar % 5 === 2) return 'danger';
  if (firstChar % 5 === 3) return 'info';
  return '';
};
import { Search, More, ArrowDown } from '@element-plus/icons-vue';
const searchText = ref('');
const filterTags = ref([
  { id: 1, name: '我负责的', active: true },
  { id: 2, name: '我参与的', active: false },
  { id: 3, name: '我关注的', active: false },
  { id: 4, name: '已超期', active: false },
  { id: 5, name: '即将到期', active: false },
]);
const toggleTag = (id: number) => {
  const tag = filterTags.value.find(t => t.id === id);
  if (tag) {
    tag.active = !tag.active;
  }
};
const actions = [
  { name: 'edit', label: '编辑', type: 'primary' },
  { name: 'delete', label: '删除', type: 'danger' },
  { name: 'transfer', label: '转交', type: '' },
  { name: 'comment', label: '评论', type: '' },
  { name: 'assign', label: '分配', type: 'warning' },
];
const statusList = ref([
  {
    id: 1,
    name: '待处理',
    count: 8,
    tasks: [
      {
        id: 1,
        title: '优化系统性能指标评估报告',
        members: {
          '技术负责人': ['张伟峰'],
          '研发组': ['李明远', '王海洋'],
          '测试组': ['赵雪梅'],
          '运维组': ['陈建国']
        },
        startDate: '2024-01-15',
        endDate: '2024-02-15',
        remainingDays: 15
      },
      {
        id: 7,
        title: '新版本发布前性能测试',
        members: {
          '技术负责人': ['林志明'],
          '研发组': ['陈思远', '李晓'],
          '测试组': ['王欣然'],
          '运维组': ['张国威']
        },
        startDate: '2024-01-16',
        endDate: '2024-02-16',
        remainingDays: 16
      },
      {
        id: 8,
        title: '自动化测试框架搭建',
        members: {
          '技术负责人': ['黄伟东'],
          '研发组': ['郑晓峰', '刘雨'],
          '测试组': ['李美华'],
          '运维组': ['王建军']
        },
        startDate: '2024-01-17',
        endDate: '2024-02-17',
        remainingDays: 17
      },
      {
        id: 9,
        title: '系统监控告警优化',
        members: {
          '技术负责人': ['章云飞'],
          '研发组': ['马思远', '张雨'],
          '测试组': ['吴雪梅'],
          '运维组': ['李志强']
        },
        startDate: '2024-01-18',
        endDate: '2024-02-18',
        remainingDays: 18
      },
      {
        id: 10,
        title: '数据库备份方案优化',
        members: {
          '技术负责人': ['郑明远'],
          '研发组': ['王浩然', '陈雨'],
          '测试组': ['张美琪'],
          '运维组': ['刘建华']
        },
        startDate: '2024-01-19',
        endDate: '2024-02-19',
        remainingDays: 19
      },
      {
        id: 2,
        title: '用户行为数据分析系统开发',
        members: {
          '技术负责人': ['刘志强'],
          '研发组': ['黄思敏', '郑云飞'],
          '测试组': ['林晓华'],
          '运维组': ['吴德华']
        },
        startDate: '2024-01-20',
        endDate: '2024-02-20',
        remainingDays: 20
      }
    ]
  },
  {
    id: 2,
    name: '进行中',
    count: 5,
    tasks: [
      {
        id: 3,
        title: '微服务架构升级方案制定',
        members: {
          '技术负责人': ['孙宇轩'],
          '研发组': ['张雨晨', '李泽远'],
          '测试组': ['王梓萱'],
          '运维组': ['刘建军']
        },
        startDate: '2024-01-10',
        endDate: '2024-02-10',
        remainingDays: 10
      },
      {
        id: 11,
        title: 'API接口性能优化',
        members: {
          '技术负责人': ['吴志远'],
          '研发组': ['刘思远', '张晓'],
          '测试组': ['李雨萱'],
          '运维组': ['王国强']
        },
        startDate: '2024-01-20',
        endDate: '2024-02-20',
        remainingDays: 20
      },
      {
        id: 12,
        title: '日志分析系统升级',
        members: {
          '技术负责人': ['陈天成'],
          '研发组': ['李浩然', '王子'],
          '测试组': ['张雪莲'],
          '运维组': ['刘志强']
        },
        startDate: '2024-01-21',
        endDate: '2024-02-21',
        remainingDays: 21
      },
      {
        id: 13,
        title: '代码质量监控平台',
        members: {
          '技术负责人': ['赵思远'],
          '研发组': ['王晓峰', '李轩'],
          '测试组': ['陈美玲'],
          '运维组': ['张建国']
        },
        startDate: '2024-01-22',
        endDate: '2024-02-22',
        remainingDays: 22
      },
      {
        id: 14,
        title: '容器化部署方案优化',
        members: {
          '技术负责人': ['李云飞'],
          '研发组': ['张思琪', '王飞'],
          '测试组': ['吴雪华'],
          '运维组': ['陈国威']
        },
        startDate: '2024-01-23',
        endDate: '2024-02-23',
        remainingDays: 23
      }
    ]
  },
  {
    id: 3,
    name: '已完成',
    count: 5,
    tasks: [
      {
        id: 4,
        title: '数据库性能优化项目',
        members: {
          '技术负责人': ['周天成'],
          '研发组': ['徐浩然', '赵子豪'],
          '测试组': ['杨雪莲'],
          '运维组': ['马志强']
        },
        startDate: '2024-01-05',
        endDate: '2024-02-05',
        remainingDays: 5
      },
      {
        id: 15,
        title: '分布式缓存系统优化',
        members: {
          '技术负责人': ['王志明'],
          '研发组': ['李云飞', '陈晓'],
          '测试组': ['张雨萱'],
          '运维组': ['刘国强']
        },
        startDate: '2024-01-24',
        endDate: '2024-02-24',
        remainingDays: 24
      },
      {
        id: 16,
        title: '安全认证系统升级',
        members: {
          '技术负责人': ['张思远'],
          '研发组': ['王浩然', '李雨'],
          '测试组': ['陈雪梅'],
          '运维组': ['马建国']
        },
        startDate: '2024-01-25',
        endDate: '2024-02-25',
        remainingDays: 25
      },
      {
        id: 17,
        title: '消息队列性能优化',
        members: {
          '技术负责人': ['李明远'],
          '研发组': ['张晓峰', '王琪'],
          '测试组': ['吴美玲'],
          '运维组': ['陈志强']
        },
        startDate: '2024-01-26',
        endDate: '2024-02-26',
        remainingDays: 26
      },
      {
        id: 18,
        title: '前端组件库文档更新',
        members: {
          '技术负责人': ['刘云飞'],
          '研发组': ['王思琪', '张飞'],
          '测试组': ['李雪华'],
          '运维组': ['吴国威']
        },
        startDate: '2024-01-27',
        endDate: '2024-02-27',
        remainingDays: 27
      }
    ]
  },
  {
    id: 4,
    name: '已验收',
    count: 5,
    tasks: [
      {
        id: 5,
        title: '前端组件库更新迭代',
        members: {
          '技术负责人': ['陈思远'],
          '研发组': ['林晓峰', '王梓轩'],
          '测试组': ['张美玲'],
          '运维组': ['李建国']
        },
        startDate: '2024-01-01',
        endDate: '2024-02-01',
        remainingDays: 1
      },
      {
        id: 19,
        title: '微服务网关优化',
        members: {
          '技术负责人': ['陈志明'],
          '研发组': ['李晓峰', '王晓'],
          '测试组': ['张雨华'],
          '运维组': ['刘建军']
        },
        startDate: '2024-01-28',
        endDate: '2024-02-28',
        remainingDays: 28
      },
      {
        id: 20,
        title: '持续集成流程优化',
        members: {
          '技术负责人': ['王思明'],
          '研发组': ['张浩然', '李轩'],
          '测试组': ['吴雪莲'],
          '运维组': ['陈国强']
        },
        startDate: '2024-01-29',
        endDate: '2024-02-29',
        remainingDays: 29
      },
      {
        id: 21,
        title: '数据同步方案优化',
        members: {
          '技术负责人': ['李志远'],
          '研发组': ['王云飞', '张琪'],
          '测试组': ['陈美华'],
          '运维组': ['刘志强']
        },
        startDate: '2024-01-30',
        endDate: '2024-03-01',
        remainingDays: 30
      },
      {
        id: 22,
        title: '系统架构文档更新',
        members: {
          '技术负责人': ['张天成'],
          '研发组': ['李思远', '王雨'],
          '测试组': ['吴雪萱'],
          '运维组': ['陈建华']
        },
        startDate: '2024-01-31',
        endDate: '2024-03-02',
        remainingDays: 31
      }
    ]
  },
  {
    id: 5,
    name: '已关闭',
    count: 5,
    tasks: [
      {
        id: 6,
        title: '安全漏洞修复专项',
        members: {
          '技术负责人': ['王志远'],
          '研发组': ['张云飞', '李思琪'],
          '测试组': ['刘雪华'],
          '运维组': ['陈国强']
        },
        startDate: '2024-01-25',
        endDate: '2024-02-25',
        remainingDays: 25
      },
      {
        id: 23,
        title: '性能监控系统升级',
        members: {
          '技术负责人': ['王云明'],
          '研发组': ['陈晓峰', '李晓'],
          '测试组': ['张美萱'],
          '运维组': ['吴建军']
        },
        startDate: '2024-02-01',
        endDate: '2024-03-03',
        remainingDays: 32
      },
      {
        id: 24,
        title: '代码审查流程优化',
        members: {
          '技术负责人': ['李思明'],
          '研发组': ['张浩然', '王云'],
          '测试组': ['陈雪莲'],
          '运维组': ['刘国威']
        },
        startDate: '2024-02-02',
        endDate: '2024-03-04',
        remainingDays: 33
      },
      {
        id: 25,
        title: '系统部署方案优化',
        members: {
          '技术负责人': ['陈志远'],
          '研发组': ['王晓飞', '李琪'],
          '测试组': ['张雪华'],
          '运维组': ['吴志强']
        },
        startDate: '2024-02-03',
        endDate: '2024-03-05',
        remainingDays: 34
      },
      {
        id: 26,
        title: '测试环境搭建优化',
        members: {
          '技术负责人': ['李天成'],
          '研发组': ['张思远', '王雨'],
          '测试组': ['陈美萱'],
          '运维组': ['刘建华']
        },
        startDate: '2024-02-04',
        endDate: '2024-03-06',
        remainingDays: 35
      }
    ]
  }
]);
const dialogVisible = ref(false);
const dialogTitle = ref('');
const dialogWidth = ref('1200px');
const dialogType = ref('');
const currentTask = ref<any>(null);
const currentStatusTasks = ref<any[]>([]);
const showStatusTasks = (status: any) => {
  dialogType.value = 'statusTasks';
  dialogTitle.value = status.name;
  dialogWidth.value = '1200px';
  currentStatusTasks.value = status.tasks;
  dialogVisible.value = true;
};
const showTaskDetail = (task: any) => {
  currentTask.value = task;
  dialogTitle.value = '任务详情';
  dialogWidth.value = '1000px';
  dialogType.value = 'taskDetail';
  dialogVisible.value = true;
};
const handleAction = (action: string, task: any) => {
  currentTask.value = task;
  dialogType.value = action;
  switch (action) {
    case 'edit':
      dialogTitle.value = '编辑任务';
      dialogWidth.value = '1200px';
      break;
    case 'delete':
      dialogTitle.value = '删除任务';
      dialogWidth.value = '600px';
      break;
    case 'transfer':
      dialogTitle.value = '转交任务';
      dialogWidth.value = '800px';
      break;
    case 'comment':
      dialogTitle.value = '任务评论';
      dialogWidth.value = '1000px';
      break;
    case 'assign':
      dialogTitle.value = '分配任务';
      dialogWidth.value = '1200px';
      break;
  }
  dialogVisible.value = true;
};
const availableLeaders = [
  '张伟峰', '林志明', '黄伟东', '章云飞', '郑明远',
  '刘志强', '孙宇轩', '吴志远', '陈天成', '赵思远'
];
const changeLeader = (taskId: number, newLeader: string) => {
  const task = statusList.value.flatMap(status => status.tasks).find(t => t.id === taskId);
  if (task) {
    task.members['技术负责人'] = [newLeader];
  }
};
const showMemberDetail = (member: string) => {
  currentTask.value = { name: member };
  dialogTitle.value = '成员详情';
  dialogWidth.value = '1000px';
  dialogType.value = 'memberDetail';
  dialogVisible.value = true;
};
const handleDialogConfirm = () => {
  dialogVisible.value = false;
};
</script>
<style scoped>
.el-input :deep(.el-input__wrapper) {
  border-radius: 8px;
  padding-left: 16px;
}

.el-dialog :deep(.el-dialog__header) {
  margin: 0;
  padding: 16px 24px;
  background-color: #f7f7f7;
  border-bottom: 1px solid #e5e7eb;
}

.el-dialog :deep(.el-dialog__footer) {
  margin: 0;
  padding: 16px 24px;
  background-color: #f7f7f7;
  border-top: 1px solid #e5e7eb;
}

.el-dialog :deep(.el-dialog__body) {
  padding: 24px;
}
</style>